<template>
   <div style="height:300px;width:500px" id="container" tabindex="0">
        <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
        <el-amap class="amap-box"
        :amap-manager="amapManager"
        :zoom="zoom"
        :center="center">
        <el-amap-marker v-for="marker in markers" :position="marker" ></el-amap-marker>
        </el-amap>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap'
@Component({
  components: {}
})
export default class supplierEditDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Provide() amapManager:any=''//地图管理对象
  @Provide() vid:any=''//地图容器节点的ID
  @Provide() zoom:any=''//地图显示的缩放级别范围
  @Provide() plugin:any=''//地图使用的插件
  @Prop() point !: [];
  @Provide() center:any= []//地图中心点坐标值
  @Provide() searchOption:any ={
            city: '',
            citylimit: false
          }
  @Provide() markers:any= []
//   标记
  addMarker() {
    let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
    let lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
    this.markers.push([lng, lat]);
    console.log(this.markers)
  }
//   搜索结果
  onSearchResult(pois) {
    let latSum = 0;
    let lngSum = 0;
    if (pois.length > 0) {
      pois.forEach(poi => {
        let {lng, lat} = poi;
        lngSum += lng;
        latSum += lat;
        // this.markers.push([poi.lng, poi.lat]);
        this.markers=[[poi.lng, poi.lat]];
      });
      let center = {
        lng: lngSum / pois.length,
        lat: latSum / pois.length
      };
      this.center = [center.lng, center.lat];
      this.$emit('bindSendMap',this.center)//将图片路径传递给父组件
    }
  }
  mounted(){
    this.center=this.point
    this.markers=[this.point]
    if(this.point==[]){
      this.center=[106.550464, 29.563761]
      this.markers=[[106.550464, 29.563761]]
    }
  }
  created() { 
    
  }
}
</script>
<style scoped>

.search-box {
    position: absolute;
    top: 25px;
    left: 20px;
}
</style>